<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        * {
            padding: 0;
            margin: 0;
        }

        div {
            position: absolute;
            left: calc(50% - 100px);
            width: 200px;
            height: 100px;
            border: 1px solid #008c8c;
            background-image: linear-gradient(green, yellow);
            /* 默认方向 top -> bottom */
            background-image: linear-gradient(to right, green, yellow);
            background-image: linear-gradient(to right top, green, yellow);
            background-image: linear-gradient(0deg, green, yellow);
            /* 0deg的方向不同浏览器兼容性不一样，学习以谷歌为准，角度变化，方向均匀变化 */
            background-image: linear-gradient(to right, green 20px, yellow 100px);
            /* 前20px是绿色，之后从20px到100px是绿色到黄色的渐变，100px之后是黄色 */
            background-image: linear-gradient(to right, green 20px, yellow 60px, #00f 100px);
            /* 20px位置是纯绿色，60px的位置是纯黄色，100px位置是纯蓝色，100px之后没有别的渐变了，所以一直是蓝色 */
            background-image: linear-gradient(to right, green 10%, yellow 60px, #00f 100px);
            /* 可以填百分比，这里相对的是长  */

            background-image: radial-gradient(#0f0, green, #0ff);
            /* 默认：从圆心或者椭圆心点（即为盒子中心，长方形盒子就是椭圆）开始向外扩散 */
            /* 可以观察一下默认情况的各个颜色的起止位置 */
            background-image: radial-gradient(#0f0 20px, green 60px, #0ff 90px);
            /* 20px 代表0f0的椭圆的水平半径，垂直半径自适应，根据盒子长宽比来的 */
            /* 填写的像素值可以特别大，会溢出边框，可以试试 */
            background-image: radial-gradient(#0f0 10%, green 60px, #0ff 90px);
            /* 可以填百分比，百分比相对于谁不详，不用探究了也 */

            background-image: radial-gradient(circle at 100px 0px, #0f0, green, #0ff);
            /* 圆形 圆心在 100px 0px 的位置 */
            background-image: radial-gradient(circle at right bottom, #0f0, green, #0ff);
            /* 圆心在右下角 */
            background-image: radial-gradient(ellipse farthest-corner at 50px 50px, #0f0 20px, green, #0ff);

            /* 
                farthest-corner   放射到最长的角
                farthest-side     放射到最长的边
                closest-corner    放射到最短的角
                closest-side      放射到最短的边
             */
            
            /* 这个属性值比较多，可以不写某个值，会采用默认效果 */
        }


    </style>
</head>
<body>
    <div></div>
</body>
</html>